import React from 'react'
import { Link } from 'react-router'
import Bangu from 'assets/images/favicon.png'
import stacc from 'assets/images/stacc.png'
import Dongmanjia from 'assets/images/dongmanzhijia.png'
import manyu from 'assets/images/manyu.png'
import Miaote from 'assets/images/miaote.png'
import acfun from 'assets/images/acfun.png'
import bili from 'assets/images/bilibili.png'
import qingbao from 'assets/images/qingbao.png'

class Content extends React.Component {

	constructor(props) {

		super(props)

		this.state = {
			hrefLink: '',
			Position: 'HideLink'
		};
		this.Transform = this.Transform.bind(this);
	}
	Transform(e) {
		this.setState({
			hrefLink: e.target.getAttribute("alt"),
			Position: 'ShowLink'
		}, function() {
			console.log('点击后的',this.state.hrefLink)
			this.props.Button('show');
		});
	}
	
	componentDidMount(){
		document.querySelector('body').addEventListener('popstate',(e)=>{
			alert('你好啊啊');
		},false);
		document.body.addEventListener('popstate',(e)=>{
			alert('你好啊啊');
		})
	}
	
	componentWillReceiveProps(props) {
		if(props.valueButton == 'hide')
			this.setState({
				Position: 'HideLink'
			})
	}
	render() {
		return(
			<div className="content-main">
				<div className="animation"></div>
				<div className="inter-link amr-g">
					<div className="amr-12">
						<ul>
							<li><span alt="http://bangumi.tv"
								onClick={this.Transform}>
								<img src={Bangu} alt="http://bangumi.tv"/>
								Bangumi</span></li>
							<li><span alt="http://www.dilidili.com"
								onClick={this.Transform}>

								嘀哩嘀哩</span></li>
							<li><span alt="http://donghua.dmzj.com" 
								 onClick={this.Transform}>
								<img src={Miaote} alt="http://donghua.dmzj.com" />								
								喵特</span></li>
							<li><span alt="http://www.1kkk.com" 
								 onClick={this.Transform}>
								<img src={Dongmanjia} alt="http://www.1kkk.com"  />								
								极速漫画</span></li>
							<li><span alt="http://www.acfun.cn" 
							    onClick={this.Transform}>
							    <img src={acfun} alt="http://www.acfun.cn"  />
							    Acfun</span></li>
							<li><span alt="http://www.bilibili.com" 
							    onClick={this.Transform}>
							     <img src={bili} alt="http://www.bilibili.com"  />
							    哔哩哔哩</span></li>
							<li><span alt="https://www.pixiv.net"
							    onClick={this.Transform}>
								<img src={stacc} alt="https://www.pixiv.net" />
								pixiv</span></li>
							<li><span alt="http://news.missevan.com"
							    onClick={this.Transform}>
							    <img src={qingbao} alt="http://news.missevan.com" />
								动漫新闻资讯</span></li>
							<li><span alt="http://www.comicyu.com"
							       onClick={this.Transform}>
								<img src={manyu} alt="http://www.comicyu.com" />
								漫域</span></li>
						</ul>
					</div>
					<iframe className={this.state.Position} src={this.state.hrefLink}
							style={{border:this.state.hrefLink ? 'block':'none'}} 
							>
					</iframe>
				</div>
			</div>
		)
	}
}

export default Content